<!--
标签栏
-->
<template>
    <div class="navbar">
        <div  v-for="(item, index) in list" :key="item.tagName" >
            <router-link :to="item.tolink" class="single-bottom index-page" replace>
                <span :class="{'active':item.id==$route.params.type}" v-if="$route.name=='search'">{{item.tagName}}</span>
                <span :class="{'active':item.id==$route.params.typeId}" v-else>{{item.tagName}}</span>
            </router-link>
        </div>
    </div>
</template>

<script>
    import {homeService} from '../../service/homeService'

    export default {
        data() {
            return{
            }
        },
        props:['list'],
        mounted() {
        },
        methods: {
        }

    }
</script>

<style lang="less">
    .navbar {
        max-width: 450px;
        width: 100%;
        height: .8rem;
        background: #FFFFFF;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        color:#20A0FF;
        z-index:20;
        font-size:14px;
        .single-bottom {
            padding:0 20px;
            line-height:.75rem;
            .active {
                color:#20A0FF;
                display: inline-block;
                border-bottom:2px solid #20A0FF;
            }
        }


    }
    /*@media only screen and (min-device-width:320px) and (max-device-width:374px) {
        .navbar{font-size: 9px;}
    }
    @media only screen and (min-device-width:375px) and (max-device-width:413px) {
        .navbar{font-size: 10px;}
    }
    @media only screen and (min-device-width:414px) and (max-device-width:474px) {
        .navbar{font-size: 11px;}
    }
    @media only screen and (min-device-width:475px){
        .navbar{font-size: 13px;}
    }*/

</style>